import React from "react"
import {Card, CardHeader, UncontrolledTooltip} from "reactstrap"
import Chart from "react-apexcharts"
import {HelpCircle} from "react-feather"

const Followers = React.memo(props => {
  const data = {
    options: {
      chart: {
        toolbar: {
          show: false
        },
        animations: {
          enabled: false
        }
      },
      stroke: {
        curve: "smooth",
        dashArray: [0, 8],
        width: [4, 2]
      },
      grid: {
        borderColor: props.labelColor
      },
      legend: {
        show: false
      },
      colors: [props.dangerLight, props.strokeColor],

      fill: {
        type: "gradient",
        gradient: {
          shade: "dark",
          inverseColors: false,
          gradientToColors: [props.primary, props.strokeColor],
          shadeIntensity: 1,
          type: "horizontal",
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 100, 100, 100]
        }
      },
      markers: {
        size: 0,
        hover: {
          size: 5
        }
      },
      xaxis: {
        labels: {
          style: {
            colors: props.strokeColor
          }
        },
        axisTicks: {
          show: false
        },
        categories: props.followers.date || [],
        axisBorder: {
          show: false
        },
        tickPlacement: "on"
      },
      yaxis: {
        tickAmount: 5,
        labels: {
          style: {
            color: props.strokeColor
          },
          formatter: val => {
            return val.toFixed(1) > 999 ? (val / 1000).toFixed(1) + "k" : val.toFixed(1)
          }
        },
      },
      tooltip: {
        x: {show: false},
        y: {
          formatter: val => {
            return val.toFixed(1).toLocaleString('ru')
          }
        },
      }
    },
    series: [
      {
        name: "",
        data: props.followers.followers
      }
    ]
  }

  return (
    <Card className="analytics-card">
      <div className="analytics-card__header">
        <CardHeader className="p-0">
          <div className="analytics-card__title">Подписчики</div>
          <HelpCircle size={20} className="cursor-pointer text-muted" id="followers-card__help-icon"/>
          <UncontrolledTooltip placement="left" target="followers-card__help-icon">
            Данные по подписчикам
          </UncontrolledTooltip>
        </CardHeader>
        <div className="followers-card__content">
          <div className="d-flex justify-content-start">
            <div className="mr-2">
              <span className="followers-card__count-title">Всего</span>
              <h2 className="text-bold-400 mb-0">
                <span className="text-success followers-card__count-value">
                  {
                    props.followers.followers[props.followers.followers.length - 1] &&
                    props.followers.followers[props.followers.followers.length - 1].toLocaleString('ru')
                  }
                </span>
              </h2>
            </div>

            {
              props.followers.unsubscribed &&
              <div className="mr-2">
                <span className="followers-card__count-title">Отписались</span>
                <h2 className="text-bold-400 text-center mb-0">
                  <span className="text-danger followers-card__count-value">
                    {props.followers.unsubscribed}
                  </span>
                </h2>
              </div>
            }

            {
              props.followers.newFollowers &&
              <div>
                <span className="followers-card__count-title">Новые</span>
                <h2 className="text-bold-400 mb-0">
                  <span className="text-primary followers-card__count-value">
                    {props.followers.newFollowers}
                  </span>
                </h2>
              </div>
            }
          </div>
        </div>
      </div>
      <Chart
        className="followers-card__chart"
        options={data.options}
        series={data.series}
        type="line"
        height={185}
      />
    </Card>
  )
})
export default Followers
